<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        ul {
            margin: 0;
            padding: 0;
            /* list-style: none; */
        }

        .box {
            width: 900px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid gray;
            position: relative;
            overflow: hidden;
        }

        header {
            position: absolute;
            width: 900px;
            height: 40px;
            line-height: 40px;
            background: #e0e0e0;
        }

        .bottom {
            width: 900px;
            height: 350px;
        }

        .picture {
            position: absolute;
            display: inline-block;
            width: 98px;
            height: 40px;
            background: url('./img/btn_cartoon.gif') -2px -98px no-repeat;
        }

        .idicator {
            position: relative;
            margin-left: 100px;
            line-height: -1px;
        }

        .idicator li {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            position: relative;
        }
        .controls {
            width:56px;
            height: 36px;
            position: relative;
            margin-left: 160px;
            margin-top: -30px;
            display: flex;
        }
        .controls span {
            position: relative;
            display: inline-block;
            width: 28px;
            height: 36px;
        }
        .controls .prev {
            position: relative;
            width: 28px;
            height: 36px;
            background: url('./img/btn_cartoon.gif') -3px -501px no-repeat;
        }
        .controls .prev:hover {
            background: url('./img/btn_cartoon.gif') -3px -401px no-repeat;
        }
        .controls .next {
            position: relative;
             margin-top: 2px; 
            width: 28px;
            height: 36px;
            background: url('./img/btn_cartoon.gif') -31px -503px no-repeat;
        }
        .controls .next:hover {
            background: url('./img/btn_cartoon.gif') -31px -403px no-repeat;
        }

        .more {
            position: absolute;
            right: 0;
            margin-top: -30px;
        }

        .more a {
            text-decoration: none;
            font-size: 15px;
            color: pink;
        }

        .more a:hover {
            cursor: pointer;
            color: red;
            text-decoration: underline;
        }

        .bottom .big {
            position: relative;
            top: 50px;
            width: 4800px;
            height: 250px;
            display: flex;
        }

        .bottom .big li {
            list-style: none;
            width: 200px;
            margin-left: 20px;
        }

        .picturef img {
            width: 200px;
            height: 150px;
        }

        .big p {
            margin: 10px auto;
            padding: 0;
        }

        .text {
            color: pink;
        }

        .text:hover {
            color: red;
            cursor: pointer;
        }

        .idicator li.active {
            background: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <header>
            <span class="picture"></span>
            <ul class="idicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="controls">
                <span class="control prev"></span>
                <span class="control next"></span>
            </div>
            <div class="more"><a href="javascript:;">更多》</a></div>
        </header>
        <div class="bottom">
            <div class="bottom-box">
                <ul class="big">
                    <li>
                        <div class="picturef"><img src="./img/01.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/01.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/01.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/01.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/02.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/02.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/02.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/02.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/03.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/03.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/03.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/03.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/04.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/04.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/04.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>
                    <li>
                        <div class="picturef"><img src="./img/04.jpg" alt=""></div>
                        <p class="text">海贼王</p>
                        <p class="play">播放28.276%</p>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <script src="./js./jquery.js"></script>
</body>

</html>
<script>
    var aa = 0;
    function showImg() {
        $('.big').stop().animate({ left: -880 * aa });
        $('.idicator li').eq(aa).addClass('active').siblings().removeClass('active');
    }
    function prev() {
        aa = aa == 0 ? 3 : aa - 1;
        showImg();
    }
    function next() {
        aa = aa == 3 ? 0 : aa + 1;
        showImg();
    }
    $('.prev').click(function () {
        prev();
    });
    $('.next').click(function () {
        next();
    });

</script>